<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <th:block th:include="include :: header('水质月趋势图')" />
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="http://cdn.staticfile.org/jquery/1.8.0/jquery.min.js"></script>
    <th:block th:include="include :: header('日期和时间')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body>
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label style="width: 75px">监测点名称:</label>
                            <select name="monitorId" id="monitorId" >
                            </select>
                        </li>
                        <li>
                            <label>查询时间：</label>
                            <input type="text" placeholder="请选择查询时间" class="time-input" name="produceTime" id="produceTime"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchData()" ><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <div id="monthTrend" style="height: 600px;width: 100%;"></div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript" th:inline="javascript">
    var property=["化学需氧量","氨氮","总磷","总氮","PH","电导","溶氧","浊度","温度"];
    var xAxis;
    var data;
    var myChart = echarts.init(document.getElementById('monthTrend'));
    $(function(){
        queryRptChart();
        loadDepartmentName();
    });

    layui.use('laydate', function() {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#produceTime',
            format: 'yyyy-MM',
            type: 'month'
        });
    })

    function loadDepartmentName() {
        $.ajax({
            url: "/bus/monitor/list",
            type: "post",
            success: function (data) {
                var nameOpt = "<option value='' selected='selected'>--请选择--</option>";
                for (var i = 0; i < data.rows.length; i++) {
                    nameOpt+="<option value='"+data.rows[i].monitorId+"' >"+data.rows[i].monitorName+"</option>"
                    $('#monitorId').html(nameOpt);
                    document.getElementsByTagName("tr[0]")
                }
            }
        });
    };

    function queryRptChart(){
        $.ajax({
            url : "property",
            type: "post",
            dataType:"json",
            async: false,
            data:{},
            success : function(result) {
                console.log(result)
                if(result){
                    property=result;
                }
            }
        });
        var date = new Date();
        var time = date.getFullYear()+"-";
        var month = date.getMonth()+1;
        if ( month < 10) {
            time = time+"0"+month;
        } else {
            time = time+month;
        }
        var body = {"produceTime":time};
        $.ajax({
            url : "xAxis1",
            type: "post",
            dataType:"json",
            async: false,
            headers: {'Content-Type': 'application/json'},
            data:JSON.stringify(body),
            success : function(result) {
                if(result){
                    xAxis=result;
                }
            }
        });
        $.ajax({
            url : "data1",
            type: "post",
            dataType:"json",
            async: false,
            data:JSON.stringify(body),
            headers: {'Content-Type': 'application/json'},
            success : function(result) {
                if(result){
                    data=result;
                }
            }
        });
        var option = {
            title : {
                text: '因子数据趋势图',
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                property
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : xAxis
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter: '{value}'
                    }
                }
            ],
            series : data
        };
        myChart.setOption(option);
    }

    function searchData() {
        var body = {"monitorId":$("#monitorId").val(),"produceTime":$("#produceTime").val()};
        var myChart = echarts.init(document.getElementById('monthTrend'));
        $.ajax({
            url : "xAxis1",
            type: "post",
            dataType:"json",
            async: false,
            headers: {'Content-Type': 'application/json'},
            data:JSON.stringify(body),
            success : function(result) {
                if(result){
                    xAxis=result;
                }
            }
        });
        $.ajax({
            url : "data1",
            type:"post",
            dataType:"json",
            data:JSON.stringify(body),
            headers: {'Content-Type': 'application/json'},
            success : function(result) {
                data=result;
                var option = {
                    title : {
                        text: '因子数据趋势图',
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        property
                    },
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : xAxis
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLabel : {
                                formatter: '{value}'
                            }
                        }
                    ],
                    series : data
                };
                myChart.setOption(option,true);
            }
        });
    }
</script>

</body>
</html>